<template>
  <div>
    <van-nav-bar 
    title="方剂学习" 
    left-text="返回"
    left-arrow
    @click-left="getBookChildNode(parentId)"/>
    <div class="container">
      <div
        class="item"
        v-for="item in childrenList"
        :key="item.childId"
        @click="getBookChildNode(item.childId)"
      >
        <div>
          <span>{{ item.childName }}</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      getBookRootIDQueryInfo: {
        methodName: "bookStudy_getBookRootID",
        data: "",
      },
      getBookChildNodeQueryInfo: {
        methodName: "bookStudy_getBookChildNode",
        data: { param: "" },
      },
      getParentIdQueryInfo: {
        methodName: "bookStudy_getParentId",
        data: { param: "" },
      },
      rootId: "",
      parentId: "",
      childrenList: [],
      preChildrenList: [],
    };
  },
  created() {
    this.getBookRootID();
    setTimeout(() => this.getBookChildNode(), 300);
    // setTimeout(() => this.getParentId(),400);
  },
  methods: {
    // 获取根节点
    async getBookRootID() {
      const { data: res } = await this.$http.post(
        "/app/main",
        JSON.stringify(this.getBookRootIDQueryInfo),
        {
          headers: {
            "Content-Type": "application/json",
          },
        }
      );
      console.log(JSON.parse(res.data));
      this.rootId = JSON.parse(res.data).rootID;
    },

    // 获取该节点的父节点
    async getParentId(event) {
      console.log("event: " + event);
      this.getParentIdQueryInfo.data.param = event;
      const { data: res } = await this.$http.post(
        "/app/main",
        JSON.stringify(this.getParentIdQueryInfo),
        {
          headers: {
            "Content-Type": "application/json",
          },
        }
      );
      console.log(JSON.parse(res.data));
      this.parentId =  JSON.parse(res.data).parentId;
    },

    // 获取目录
    async getBookChildNode(event) {
      if (event === undefined)
        this.getBookChildNodeQueryInfo.data.param = this.rootId;
      else {
        this.getBookChildNodeQueryInfo.data.param = event;
      }
      const { data: res } = await this.$http.post(
        "/app/main",
        JSON.stringify(this.getBookChildNodeQueryInfo),
        {
          headers: {
            "Content-Type": "application/json",
          },
        }
      );
      console.log("this.getBookChildNodeQueryInfo.data.param" + this.getBookChildNodeQueryInfo.data.param);
      this.getParentId(this.getBookChildNodeQueryInfo.data.param);
      console.log("parentId:"+this.parentId);
      console.log(JSON.parse(res.data));
      this.childrenList = JSON.parse(res.data).childInfos;
      console.log(this.childrenList.length);
      if (this.childrenList.length === 0) {
        console.log("dafeas");
        this.$router.push({
          path: "/detail",
          query: { id: event},
        });
      }
    },
  },
};
</script>

<style scoped>
.container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.item {
  width: 600px;
  height: 100px;
  background-color: #ead7c6;
  border-radius: 10px;
  box-shadow: 0 4px rgba(0, 0, 0, 0.25);
  color: #fff;
  margin: 20px;
  display: flex;
  justify-content: center;
  align-items: center;
}
</style>